<template>
<el-container>
    <el-header>
        <div class="left-panel">
            <div class="right-panel-search">
                <div class="left">
                    <img class="leftImg" src="@/assets/img/devStatus.png" />
                    <div class="devText">设备状态</div>
                </div>
                <el-select v-model="status"  filterable placeholder="所有组织">
                    <el-option v-for="item in Settlement" :key="item.id" :label="item.title" :value="item.id"/>
                </el-select>
                <div class="gang">-</div>
                <el-select v-model="status"  filterable placeholder="所在车间">
                    <el-option v-for="item in Settlement" :key="item.id" :label="item.title" :value="item.id"/>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </div>
    </el-header>
    <el-main>
        <!-- 顶部 -->
        <div style="display: flex">
            <div style="width: 50%;display: flex;flex-wrap:wrap">
                <el-card shadow="never" header="" class="data_card" v-for="(item,index) in numList" :key="index">
                    <div class="textAndNum">
                    <div class="text">{{item.state}}</div>
                    <div class="unit">
                        <div class="number">{{item.total}}</div>
                        <div class="ge">(台)</div>
                    </div>
                    </div>
                    <img class="image" :src="item.src" />
                </el-card>
            </div>
            <div style="width: 50%">
                <el-card
                shadow="never"
                header=""
                class="data_card_right"
                :body-style="{ padding: 0 }"
                >
                <scEcharts height="300px" :option="option4"></scEcharts>
                </el-card>
            </div>
        </div>
        <!-- 中间 -->
        <div style="display: flex">
            <div style="width: 50%">
                <el-card
                shadow="never"
                header=""
                class="data_card_mid_left"
                :body-style="{ padding: 0 }"
                >
                <scEcharts height="300px" :option="option2"></scEcharts>
                </el-card>
            </div>
            <div style="width: 50%">
                <el-card
                shadow="never"
                header=""
                class="data_card_mid_right"
                :body-style="{ padding: 0 }"
                >
                <scEcharts height="300px" :option="option"></scEcharts>
                </el-card>
            </div>
        </div>
        <!-- 下面 -->
        <div style="display: flex">
            <div style="width: 50%">
                <el-card shadow="never" header="" class="data_card_mid_left" :body-style="{ padding: 0 }">
                <div class="bulletin">
                    <el-tabs tab-position="top" style="margin: 0 20px">
                    <el-tab-pane label="站内通知公告栏">
                        <div class="list">
                            <div class="titleText">暂无公告...</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="企业动态">
                        <div class="list">
                            <div class="titleText">暂无动态...</div>
                            <!-- <div class="titleText">企业动态的内容</div>
                            <div class="time">2020-20-20 14:45</div> -->
                        </div>
                    </el-tab-pane>
                    </el-tabs>
                </div>
                </el-card>
            </div>
            <div style="width: 50%">
                <el-card shadow="never" header="" class="data_card_mid_right" :body-style="{ padding: 0 }">
                    <div class="todaywith">
                        <div class="font">今日待办</div>
                        <div class="withList top">
                            暂无待办...
                        </div>
                        <!-- <div class="withList top">
                            <div class="badge">
                                <div class="title">这是今天的标题</div>
                                <div class="badge">2条</div>
                            </div>
                            <div class="contont">
                                今天跟大家分享的是班组设备管理，主要包括保养永远比维修更重要，设备优化才是高效率。班组设备管理是指在班组层面上，对生产设备进行管理，确保设备...
                            </div>
                        </div>
                        <div class="withList">
                            <div class="badge">
                                <div class="title">这是今天的标题</div>
                                <div class="badge">8条</div>
                            </div>
                            <div class="contont">
                                今天跟大家分享的是班组设备管理，主要包括保养永远比维修更重要，设备优化才是高效率。班组设备管理是指在班组层面上，对生产设备进行管理，确保设备...
                            </div>
                        </div> -->
                    </div>
                </el-card>
            </div>
        </div>
    </el-main>
</el-container>
</template>

<script>
import scEcharts from "@/components/scEcharts";
import scStatistic from "@/components/scStatistic";
export default {
  components: {
    scEcharts,
    scStatistic,
  },
  data() {
    return {
      option: {
        grid: {
          top: "80px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            barWidth: "15px",
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: "bar",
            barWidth: "15px",
          },
        ],
      },
      option2: {
        grid: {
          top: "80px",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "line",
          },
          {
            data: [110, 180, 120, 120, 60, 90, 110],
            type: "line",
          },
        ],
      },
      option4: {
        tooltip: {
          trigger: "item",
        },
        radar: {
          radius: 100,
          center: ["50%", "55%"],
          indicator: [
            { name: "运行设备", max: 100 },
            { name: "待机设备", max: 100 },
            { name: "离线设备", max: 100 },
            { name: "故障设备", max: 100 },
            { name: "", max: 100 },
            { name: "", max: 100 },
            { name: "", max: 100 },
            { name: "", max: 100 },
          ],
        },
        series: [
          {
            name: "SCUI",
            type: "radar",
            areaStyle: {},
            data: [
              {
                value: [74, 90, 95, 65, 80, 31],
              },
            ],
          },
        ],
      },
      numList:[],
    };
  },
  mounted() {
    this.getNumber()
  },
  methods: {
    async getNumber(){
        var res = await this.$API.all.getStatistics.get();
        this.numList = res.data
    },
  },
};
</script>

<style scoped lang="scss">
.left {
    display: flex;
    align-items: center;
    .leftImg {
        width: 24px;
        height: 24px;
    }
    .devText {
        color: #232323;
        font-size: 18px;
        margin: 0 29px 0 11px;
    }
}
.gang {
  margin: 0 15px;
}
.data_card {
  // width: 240px;
  width: 31.5%;
  height: 144px;
  background-color: #ffffff;
  box-shadow: 4px 7px 18px 0px rgba(9, 108, 74, 0.07);
  border-radius: 10px;
  margin-right: 15px;
  // margin-bottom: 15px;
  font-size: 18px;
  position: relative;
  .textAndNum {
    .text {
      font-size: 18px;
      margin-bottom: 14px;
    }
    .unit {
      display: flex;
      align-items: end;
      .number {
        font-size: 36px;
        margin-right: 15px;
      }
      .ge {
        font-size: 16px;
        color: #9c9c9c;
      }
    }
  }
  .image {
    width: 96px;
    height: 96px;
    position: absolute;
    right: 0;
    top: 0;
  }
}

.data_card_right {
  // width: 770px;
  // height: 283px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 15px;
}

.data_card_mid_left {
  // width: 750px;
  height: 347px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-right: 15px;
  margin-bottom: 15px;
}

.data_card_mid_right {
  // width: 770px;
  height: 347px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 15px;
  .todaywith {
    padding: 25px 21px;
    .font {
      font-size: 18px;
      color: #01a066;
      padding-bottom: 13px;
    }
    .withList {
      background: #f6f7f9;
      border-radius: 10px;
      padding: 20px 25px;
      .badge {
        display: flex;
        align-items: center;
        .title {
          font-size: 18px;
          color: #454545;
          margin-bottom: 4px;
        }
        .badge {
          background: #ef5440;
          font-size: 14px;
          color: #fff;
          border-radius: 12px;
          margin-left: 9px;
          padding: 2px 6px;
        }
      }
      .contont {
        font-size: 16px;
        color: #777777;
      }
    }
  }
  .top {
    margin-bottom: 17px;
  }
}

.sc-statistic-title {
  font-size: 18px !important;
}
.bulletin {
  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    color: #505050;
  }
}
</style>
